<!doctype html>
<html>
  <head>
    <title>内联调用方法示例</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      .product {
        border: 1px solid #ccc;
        margin: 10px;
        padding: 10px;
      }
      .button {
        margin: 5px;
        padding: 5px 10px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>商品管理</h2>
      <div v-for="product in products" :key="product.id" class="product">
        <h3>{{ product.name }}</h3>
        <p>价格：￥{{ product.price }}</p>
        <p>库存：{{ product.stock }}</p>

        <!-- 内联调用方法，传递不同参数 -->
        <button class="button" @click="updateStock(product.id, 1)">增加库存</button>
        <button class="button" @click="updateStock(product.id, -1)">减少库存</button>
        <button class="button" @click="updatePrice(product.id, 10)">涨价10元</button>
        <button class="button" @click="updatePrice(product.id, -10)">降价10元</button>
        <button class="button" @click="removeProduct(product.id, $event)">删除商品</button>
      </div>

      <div>
        <h3>操作日志</h3>
        <ul>
          <li v-for="log in logs" :key="log.id">{{ log.message }}</li>
        </ul>
      </div>
    </div>

    <script>
      const { createApp, ref } = Vue

      createApp({
        setup() {
          const products = ref([
            { id: 1, name: '笔记本电脑', price: 5000, stock: 10 },
            { id: 2, name: '手机', price: 3000, stock: 20 },
            // { id: 3, name: '平板', price: 2000, stock: 15 }
          ])

          const logs = ref([])
          let logId = 1

          const addLog = message => {
            logs.value.unshift({
              id: logId++,
              message: `${new Date().toLocaleTimeString()} - ${message}`
            })
            if (logs.value.length > 10) {
              logs.value.pop()
            }
          }

          const updateStock = (productId, change) => {
            const product = products.value.find(p => p.id === productId)
            if (product) {
              const newStock = product.stock + change
              if (newStock >= 0) {
                product.stock = newStock
                addLog(
                  `${product.name} 库存${change > 0 ? '增加' : '减少'}${Math.abs(change)}，当前库存：${product.stock}`
                )
              } else {
                addLog(`${product.name} 库存不足，无法减少`)
              }
            }
          }

          const updatePrice = (productId, change) => {
            const product = products.value.find(p => p.id === productId)
            if (product) {
              const newPrice = product.price + change
              if (newPrice > 0) {
                product.price = newPrice
                addLog(
                  `${product.name} 价格${change > 0 ? '上涨' : '下降'}${Math.abs(change)}元，当前价格：￥${product.price}`
                )
              } else {
                addLog(`${product.name} 价格不能为负数`)
              }
            }
          }

          const removeProduct = (productId, event) => {
            if (confirm('确定要删除这个商品吗？')) {
              const index = products.value.findIndex(p => p.id === productId)
              if (index !== -1) {
                const product = products.value[index]
                products.value.splice(index, 1)
                addLog(`删除商品：${product.name}`)
              }
            }
            // 演示事件对象的使用
            console.log('删除按钮被点击', event.target)
          }

          return {
            products,
            logs,
            updateStock,
            updatePrice,
            removeProduct
          }
        }
      }).mount('#app')
    </script>
  </body>
</html>
